<template>
  <div class="outsides">
    <!-- 编辑 -->
    <div class="message">
     <div><h1>供应商名称:{{formData.supplierName }}  <span> &emsp; </span> 编号：{{formData.supplierNo}}</h1></div>
      <div>
        <el-form
          :inline="true"
          ref="elForm"
          type="text"
          :model="form"
          :rules="rules"
          size="medium"
          label-width="150px"
          style="margin: 20px 80px 0 10px"
        >
      <el-row>
          <el-form-item label="创建人:">
            <!-- <span> {{拿到数据渲染}} </span> -->
            <span>{{ formData.createBy }}</span>
          </el-form-item>

          <el-form-item label="创建时间:">
            <span>{{ formData.createTime }}</span>
          </el-form-item>
          <el-form-item label="最后修改人:">
            <span>{{ formData.updateBy }}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ formData.updateTime }}</span>
          </el-form-item>
</el-row>

        </el-form>
      </div>
    </div>
    <div class="header">
      <h1>基础信息</h1>
    </div>
    <div class="outside">
      <div class="left">
        <el-form
          ref="formData"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-form-item label="供应商名称:" prop="supplierName">
            <el-input
              v-model="formData.supplierName"
              placeholder="请输入供应商名称"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="法人" prop="legalPerson">
            <el-input
              v-model="formData.legalPerson"
              placeholder="请输入法人"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>

          <div style="width: 400px">
            <el-form-item label="省，市，区" :model="formData">
              <el-cascader
                style="width: 320px"
                :options="options"
                v-model="selectedOptions"
                @change="addressChoose"
                :props="{ expandTrigger: 'hover' }"
              ></el-cascader>
              <!-- selectedOptions -->
            </el-form-item>
          </div>

          <el-form-item label="详细地址" prop="address">
            <el-input
              v-model="formData.address"
              placeholder="请输入详细地址"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contacts">
            <el-input
              v-model="formData.contacts"
              placeholder="请输入联系人"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-form
          ref="formData"
          :model="formData"
         
          size="medium"
          label-width="130px"
        >
          <el-form-item label="供应商类型" prop="supplierType">
            <el-select
              v-model="formData.supplierType"
              placeholder="请选择供应商类型"
              clearable
            >
              <el-option
                v-for="dict in dict.type.supplier_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="合作关系等级" prop="partnershipLevel">
            <el-select
              v-model="formData.partnershipLevel"
              placeholder="请选择合作关系等级"
              clearable
            >
              <el-option
                v-for="dict in dict.type.partnership_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="社会信用代码" prop="socialCreditCode">
            <el-input
              v-model="formData.socialCreditCode"
              placeholder="请输入社会信用代码"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input
              v-model="formData.phone"
              placeholder="请输入联系电话"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <el-form>
        <el-form-item size="large">
         <el-button @click="resetForm">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
import {
  listSupplier,
  getSupplier,
  delSupplier,
  addSupplier,
  updateSupplier,
} from "@/api/supplier/supplier";
export default {
  components: {},
  props: [],
  dicts: ["supplier_type", "partnership_level"],
  data() {
    return {
      // 省市区级联
      options: regionDataPlus,
      selectedOptions: [],
      formData: {
        county: "",
        city: "",
        province: "",
        // options: regionDataPlus,
        // selectedOptions: [],
      },
      form: {},
     // 表单校验
      rules: {
        supplierName: [
          { required: true, message: "供应商名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    console.log("query", this.$route.query.id);

    getSupplier(this.$route.query.id).then((res) => {
      this.formData = res.data;
      this.selectedOptions=[
        this.formData.province.split(',')[0],
        this.formData.city.split(',')[0],
        this.formData.county.split(',')[0],
        //  this.formData.province,
        // this.formData.city,
        // this.formData.county,
      ],
      console.log( "供应",this.formData);
    });
  },
  mounted() {},

  methods: {
     // 表单重置
    reset() {
      this.formData = {
        supplierName: null,
        legalPerson: null,
        selectedOptions: null,
        address: null,
        contacts: null,
        supplierType: null,
        partnershipLevel: null,
        socialCreditCode: null,
        phone: null,
      };
    },


    /**省市区三级联动 */
    addressChoose(value) {
      console.log("地址", value);
      console.log(
        "省市区：",
        CodeToText[value[0]],
        CodeToText[value[1]],
        CodeToText[value[2]]
      );
    },
    // 修改成功
    // submitForm() {
    //   this.$refs["elForm"].validate((valid) => {
    //     if (!valid) return;
    //     // TODO 提交表单
    //   });
    // },
   submitForm() {
      
         var s = this.formData.supplierName;
        console.log(s)
        if(s === null || s === '' || s === undefined){
          return;
        }

        this.$refs["formData"].validate((valid) => {
        if (valid) {
          console.log("f", this.formData);
          addSupplier(this.formData).then((response) => {
            this.$modal.msgSuccess("新增成功");
            // this.open = true;
            const obj = {
              path: "/supplier/supplier",
              query: { t: Date.now(), pageNum: this.$route.query.pageNum },
            };
            this.$tab.closeOpenPage(obj);
          });
        }
      });
    },

    resetForm() {
       this.reset();
      // this.$refs["elForm"].resetFields();
      const obj = {
        path: "/supplier/supplier",
        query: { t: Date.now(), pageNum: this.$route.query.pageNum },
      };
      this.$tab.closeOpenPage(obj);
      // this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
.outsides {
  margin-left: 17px;
}
.header {
  margin-top: 30px;
  margin-left: 30px;
}

.outside {
  width: 100%;
  display: flex;
  margin-top: 50px;
}
.left {
  width: 44%;
  margin-left: 100px;
  line-height: 100px;
}
.right {
  width: 44%;
}
.footer {
  margin-top: 30px;
  text-align: center;
}
.message {
  margin-top: 10px;
  padding-left: 20px;
  width: 50%vh;
  height: 170px;
  margin-right: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  border: 1px solid gainsboro;
  border-radius: 1rem;
  span {
    font-size: 20px;
    margin-right: 120px;
  }
}
</style>
